<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

	<f:view contentType="text/html" encoding="utf8">
		<h:head>
			<title>show  ajaxstatus的页面</title>
		</h:head>
		<h:body>
		
			<h:form prependId="false">
			
				<h:commandButton action="#{ajaxStatusController.procssAjax}" value="提交" id="clickBtn">
					<f:ajax execute="@form" render="@form" onevent="showProgress"></f:ajax>
				</h:commandButton>
				
				<h:outputText id="clickBtn_message"/>
			</h:form>
			
			 <script type="text/javascript">

        function showProgress(data) {
            
            var inputElement = data.source; // The HTML DOM input element.
            var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
            var messageForInputElement = document.getElementById(inputElement.id + "_message");

            switch (ajaxStatus) {
                case "begin": // This is called right before ajax request is been sent.
                    messageForInputElement.innerHTML = "validating...";
                    break;

                case "complete": // This is called right after ajax response is received.
                    messageForInputElement.innerHTML = "刚刚收到response";
                    //alert("complete");
                    break;

                case "success": // This is called when ajax response is successfully processed.
                    if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
                        messageForInputElement.innerHTML = "valid!";
                    }
                    break;
            }
        }
        </script>
		</h:body>
	</f:view>
</html>